import 'package:flutter/material.dart';
import 'package:netease_music/models/recommend_mv_item.dart';
import 'package:netease_music/theme/custom_colors.dart';
import 'package:netease_music/widget/my_cached_network_image.dart';

class RecommendMv extends StatelessWidget {
  final List<RecommendMvItem> recommentMvList;
  const RecommendMv({
    super.key,
    required this.recommentMvList,
  });

  @override
  Widget build(BuildContext context) {
    // 宽度 屏幕宽度 减去 间距 除 2 就是图片的宽度， 高度 通过宽度 除 宽高比得出
    final double imgWidth = (MediaQuery.of(context).size.width - 8 - 24) / 2;
    final double imgHeight = imgWidth / 1.7; // 使用1.7宽高比
    // 宽度 / 高度 加上两个 text的高度 等于 宽高比
    final double childAspectRatioNumber = imgWidth / (imgHeight + 48);
    return Padding(
      padding: const EdgeInsets.all(12),
      child: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: Row(
                  children: [
                    Icon(
                      Icons.smart_display,
                      size: 18,
                      color: Theme.of(context).primaryColor,
                    ),
                    const SizedBox(width: 2),
                    Text(
                      '推荐MV',
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                  ],
                ),
              ),
              GestureDetector(
                onTap: () {},
                child: Text(
                  '更多',
                  style: Theme.of(context).textTheme.bodyMedium,
                ),
              ),
              Icon(
                Icons.chevron_right,
                size: 14,
                color: Theme.of(context).extension<CustomColors>()!.borderColor,
              ),
            ],
          ),
          const SizedBox(
            height: 6,
          ),
          SizedBox(
            child: GridView.builder(
              shrinkWrap: true, // GridView 的大小（主要是高度）根据内容自适应
              physics: const NeverScrollableScrollPhysics(), // 禁止内部滚动
              itemCount: recommentMvList.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 8,
                childAspectRatio: childAspectRatioNumber,
              ),
              itemBuilder: (context, index) {
                return Stack(
                  children: [
                    SizedBox(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(
                            width: imgWidth,
                            height: imgHeight,
                            child: MyCachedNetworkImage(
                              imageUrl: recommentMvList[index].picUrl,
                              width: imgWidth,
                              height: imgHeight,
                              x: 783,
                              y: 439,
                            ),
                          ),
                          Text(
                            recommentMvList[index].name,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: Theme.of(context).textTheme.titleMedium,
                          ),
                          Text(
                            recommentMvList[index]
                                .artists
                                .map((artist) => artist['name'])
                                .join(', '),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: Theme.of(context).textTheme.titleSmall,
                          ),
                        ],
                      ),
                    ),
                    Positioned(
                      top: 0,
                      left: 0,
                      right: 0,
                      child: Container(
                        height: 24,
                        color: Colors.black.withOpacity(0.1),
                        child: Padding(
                          padding: const EdgeInsets.only(
                            left: 6,
                            right: 6,
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Icon(
                                Icons.videocam,
                                size: 10,
                                color: Theme.of(context)
                                    .extension<CustomColors>()!
                                    .iconColor,
                              ),
                              const SizedBox(
                                width: 4,
                              ),
                              Text(
                                '${recommentMvList[index].playCount / 1000}万',
                                style: TextStyle(
                                  fontSize: 10,
                                  color: Theme.of(context)
                                      .extension<CustomColors>()!
                                      .iconColor,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    )
                  ],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
